<template>
  <div class="main-con flex1 vbox">
    <div class="search-con">
      <el-form :model="searchParam" :inline="true" label-width="105px">
        <el-form-item label prop="name">
          <el-input
            v-model.trim="searchParam.name"
            @keyup.enter.native="search"
            placeholder="输入服务商名称查询"
          ></el-input>
        </el-form-item>
        <el-form-item label prop="type">
          <base-select
            holder="请选择服务商类型"
            dictCode="service_provider_type"
            v-model="searchParam.type"
          ></base-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="toolbar">
      <el-button icon="el-icon-plus" type="primary" @click="addService">新增服务商</el-button>
    </div>
    <div class="vbox flex1">
      <base-table
        ref="servicePTable"
        url="serviceprovider/getPage"
        code="htk"
        :selection="false"
        :param="searchParam"
        :cls="columns"
        :optionBtns="optionBtns"
        @handlerOption="handlerOption"
        :option-width="205"
      ></base-table>
    </div>
    <el-dialog center title="新增/编辑服务商" :visible.sync="showAddDialog" width="28%">
      <el-form ref="providerForm" :rules="rules" :model="provider" label-width="100px">
        <el-form-item label="服务商名称" prop="name">
          <el-input v-model="provider.name" placeholder="请输入服务商名称"></el-input>
        </el-form-item>
        <el-form-item label="服务商类型" prop="type">
          <base-select dictCode="service_provider_type" v-model="provider.type"></base-select>
        </el-form-item>
        <el-form-item label="负责人" prop="manager">
          <el-input v-model="provider.manager" placeholder="请输入负责人名称"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="provider.phone" placeholder="请输入服务商联系电话"></el-input>
        </el-form-item>
        <el-form-item label="邮编" prop="postcode">
          <el-input v-model="provider.postcode" placeholder="请输入服务商邮编"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" prop="address">
          <el-input type="textarea" :rows="5" v-model="provider.address" placeholder="请输入联系地址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveProvider">保存</el-button>
        <el-button @click="showAddDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    let me = this;
    return {
      showAddDialog: false,
      searchParam: {
        type: "",
        name: ""
      },
      provider: {},
      rules: {
        name: [
          {
            required: true,
            message: "请输入服务商名称",
            trigger: ["change", "blur"]
          }
        ],
        type: [
          {
            required: true,
            message: "请输入服务商类型",
            trigger: ["change", "blur"]
          }
        ]
      },
      columns: [
        {
          prop: "name",
          label: "服务商名称",
          width: 200
        },
        {
          prop: "type",
          label: "服务商类型",
          formatter(row) {
            switch (row.type) {
              case 1:
                return "快递公司";
                break;
              case 2:
                return "报关公司";
                break;
              case 3:
                return "货运公司";
                break;
              case 4:
                return "清关公司";
                break;
            }
          }
        },
        {
          prop: "manager",
          label: "负责人"
        },
        {
          prop: "manager",
          label: "联系电话"
        },
        {
          prop: "address",
          label: "联系地址"
        },
        {
          prop: "postcode",
          label: "邮编"
        },
        { prop: "crteTime", label: "创建时间", width: 180 }
      ],
      optionBtns: [
        { text: "编辑", code: "list_edit", type: "primary" },
        { text: "删除", code: "list_delete" }
      ]
    };
  },
  created() {},
  mounted() {
    this.defaultProvider = JSON.parse(JSON.stringify(this.$data.provider));
  },
  methods: {
    search() {
      this.$refs["servicePTable"].initLoad();
    },
    handlerOption(code, row) {
      if (code == "list_edit") {
        this.editService(row);
      } else if (code == "list_delete") {
        this.deleteService(row);
      }
    },
    deleteService(row) {
      let me = this;
      me.$confirm("确定要删除选中行吗？", "删除提示")
        .then(res => {
          me.$http.ajax({
            url: "serviceprovider/delete/" + row.id,
            code: "htk",
            success: res => {
              me.$message.success("删除成功");
              me.search();
            }
          });
        })
        .catch(() => {});
    },
    addService() {
      this.showAddDialog = true;
      this.$nextTick(() => {
        this.$refs["providerForm"].resetFields();
        this.provider = Object.assign({}, this.defaultProvider);
      });
    },
    editService(row) {
      this.showAddDialog = true;
      this.$nextTick(() => {
        this.$refs["providerForm"].resetFields();
        let tempData = Object.assign({}, row);
        this.provider = tempData;
        this.provider.type = tempData.type + "";
      });
    },
    saveProvider() {
      let me = this;
      me.$refs.providerForm.validate(valid => {
        if (!valid) {
          return false;
        }
        me.$http.ajax({
          url: "serviceprovider/saveServiceProvider",
          code: "htk",
          data: me.provider,
          success: res => {
            me.$message.success("保存成功");
            me.search();
            me.showAddDialog = false;
          }
        });
      });
    }
  }
};
</script>

<style >
</style>
